<template>
  <div class="box">
    <el-dialog
      width="60%"
      destroy-on-close
      :before-close="close"
      title="充值凭证上传"
      v-model="dialogVisible"
    >
      <section v-loading="loading">
        <el-form
          v-for="(item, i) in baseFrom"
          :key="i"
          ref="baseFromRef"
          :model="item"
          label-width="130px"
          :rules="rules"
        >
          <!-- 额度信息 -->
          <aside class="mode">
            <div class="mode_head flex">
              <span class="title">{{ item.customer_name || '--' }}</span>
            </div>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="付款方" prop="customer_name">
                  <VabInputForm disabled v-model="item.customer_name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收款方" prop="settle_org_name">
                  <VabInputForm disabled v-model="item.settle_org_name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="币别" prop="trading_curr_name">
                  <VabInputForm disabled v-model="item.trading_curr_name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="充值金额" prop="amount">
                  <VabNumberForm disabled v-model="item.amount" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="打款方式" prop="pay_type">
                  <VabSelectForm
                    :options="settleTypeList"
                    v-model="item.pay_type"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="充值凭证" prop="credit_url">
                  <VabUploadFile
                    ref="vabUploadFileRef"
                    :accept="accept"
                    title="上传"
                    tip="支持word、Excel、PDF、JPG、JPEG、PNG上传(最多上传一份)"
                    :style="{
                      width: '42%',
                      height: '30px',
                      'font-size': '14px',
                    }"
                    @expose-path="
                      (path: string) => {
                        item.credit_url = path
                      }
                    "
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </aside>
        </el-form>
      </section>
      <footer class="flex_just_center">
        <el-button size="small" @click="close">取消</el-button>
        <el-button size="small" type="primary" @click="submit()">
          提交
        </el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { gp } from '~/library/plugins/vab'
  import { getCustomerCategoryList } from '~/src/api/dms/home/homeCustomer'
  import {
    getOrganizationList,
    getRechargeBefore,
    rechargeCreate,
  } from '~/src/api/dms/home/organization'
  import { getBaseList } from '~/src/api/dms/public'

  const _orderNo = ref('')

  const loading = ref(false)
  const dialogVisible = ref(false)
  const baseFrom = ref<any>([])

  const baseFromRef = ref()

  const categoryList = ref<any>([])
  const organizationList = ref<any>([])
  const currencyList = ref<any>([])
  const settleTypeList = ref<any>([])
  const accept = '.docx,.doc,.xls,.xlsx,.pdf,.jpg,.png,.jpeg'

  const rules = {
    amount: [
      {
        required: true,
        message: '充值金额不能为空',
        trigger: 'blur',
      },
    ],
    customer_name: [
      {
        required: true,
        message: '付款方不能为空',
        trigger: 'blur',
      },
    ],
    settle_org_name: [
      {
        required: true,
        message: '收款方不能为空',
        trigger: 'blur',
      },
    ],
    trading_curr_name: [
      {
        required: true,
        message: '币别不能为空',
        trigger: 'blur',
      },
    ],
    pay_type: [
      {
        required: true,
        message: '打款方式不能为空',
        trigger: 'blur',
      },
    ],
    credit_url: [
      {
        required: true,
        message: '充值凭证不能为空',
        trigger: 'blur',
      },
    ],
  }

  /**
   * @method
   */

  const emit = defineEmits(['refresh'])

  // 开
  const open = async (order_no = '') => {
    dialogVisible.value = true
    loading.value = true
    _orderNo.value = order_no
    const cateRes = await getCustomerCategoryList() //买方
    const orgRes = await getOrganizationList() //卖方
    const currencyRes = await getBaseList('currency') //币别
    const settleTypeRes = await getBaseList('settle_type') //付款方式

    organizationList.value = orgRes.data.map((item: any) => {
      return { value: item.uid, label: item.name }
    })
    categoryList.value = cateRes.data.map((item: any) => {
      return { value: item.uid, label: item.name }
    })
    currencyList.value = currencyRes.data.map((item: any) => {
      return { value: item.uid, label: item.name }
    })
    settleTypeList.value = settleTypeRes.data.map((item: any) => {
      return { value: item.uid, label: item.name }
    })

    let res = await getRechargeBefore({ order_no })

    baseFrom.value = res.data

    loading.value = false
  }
  // 关
  const close = () => {
    dialogVisible.value = false
  }
  // 提交
  const submit = async () => {
    let checkValidate = false

    console.log(baseFrom.value, 'baseFrom.value')
    console.log(baseFromRef.value, 'baseFromRef.value')

    if (baseFromRef.value) {
      if (baseFromRef.value[0])
        checkValidate = await baseFromRef.value[0].validate(
          (valid: any, fields: any) => {
            if (!valid) return false
            return true
          }
        )

      if (baseFromRef.value[1])
        checkValidate = await baseFromRef.value[1].validate(
          (valid: any, fields: any) => {
            if (!valid) return false
            return true
          }
        )
      if (baseFromRef.value[2])
        checkValidate = await baseFromRef.value[2].validate(
          (valid: any, fields: any) => {
            if (!valid) return false
            return true
          }
        )
      if (baseFromRef.value[3])
        checkValidate = await baseFromRef.value[3].validate(
          (valid: any, fields: any) => {
            if (!valid) return false
            return true
          }
        )
    }

    if (!checkValidate) return

    rechargeCreate({ order_no: _orderNo.value, list: baseFrom.value })
      .then((res) => {
        gp.$baseMessage('充值成功!', 'success')
        close()
        emit('refresh')
      })
      .catch((err) => {
        console.log(err)

        gp.$baseMessage('充值失败!', 'error')
      })
  }

  onMounted(() => {})

  defineExpose({
    open,
    close,
  })
</script>
<style scoped lang="scss">
  .box {
    :deep() {
      .el-dialog__header {
        padding: 16px;
      }

      .el-dialog__body {
        padding: 16px;
        padding-top: 0px;
      }
    }

    section {
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
    }
  }

  .mode {
    background-color: #fffaf4;
    padding-top: 12px;
    padding-left: 12px;
    margin-bottom: 22px;
    border-radius: 4px;

    .mode_head {
      margin-bottom: 12px;
    }

    .padding_18 {
      padding-bottom: 18px;
    }

    .title {
      font-size: 15px;
      display: flex;
      align-items: center;
      position: relative;
      margin-left: 12px;
      margin-right: 12px;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -12px;
        width: 4px;
        height: 18px;
        background-color: #f59a23;
      }
    }
  }

  footer {
    padding: 12px 0;
  }
</style>
